<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <button
      aria-checked="true"
      class="ant-switch ant-switch-checked"
      role="switch"
      type="button"
    >
      <div
        class="ant-switch-handle"
      />
      <span
        class="ant-switch-inner"
      >
        <span
          class="ant-switch-inner-checked"
        >
          使用自定义错误边界
        </span>
        <span
          class="ant-switch-inner-unchecked"
        >
          使用默认错误边界
        </span>
      </span>
    </button>
    <div
      class="ant-result ant-result-info"
      style="height: 100%; background: #fff;"
    >
      <div
        class="ant-result-icon"
      >
        <img
          src="https://gw.alipayobjects.com/zos/antfincdn/zIgkN%26mpMZ/shibaizhuangtaizuo.png"
          width="256"
        />
      </div>
      <div
        class="ant-result-title"
      >
        错误处理
      </div>
      <div
        class="ant-result-extra"
      >
        <div
          style="max-width: 620px; text-align: start; background-color: rgba(255, 229, 100, 0.3); border-inline-start-color: #ffe564; border-inline-start-width: 9px; border-inline-start-style: solid; padding: 20px 45px 20px 26px; margin: auto; margin-block-end: 30px; margin-block-start: 20px;"
        >
          <p>
            注意
          </p>
          <p>
            错误边界
            <strong>
              无法
            </strong>
            捕获以下场景中产生的错误：
          </p>
          <ul
            style="list-style: none;"
          >
            <li>
              事件处理（
              <a
                href="https://zh-hans.reactjs.org/docs/error-boundaries.html#how-about-event-handlers#how-about-event-handlers"
              >
                了解更多
              </a>
              ）
            </li>
            <li>
              异步代码（例如 
              <code>
                setTimeout
              </code>
               或 
              <code>
                requestAnimationFrame
              </code>
               回调函数）
            </li>
            <li>
              服务端渲染
            </li>
            <li>
              它自身抛出来的错误（并非它的子组件）
            </li>
          </ul>
        </div>
        <button
          class="ant-btn ant-btn-primary ant-btn-dangerous ant-btn-color-dangerous ant-btn-variant-solid"
          type="button"
        >
          <span>
            刷新页面
          </span>
        </button>
      </div>
    </div>
  </div>
</DocumentFragment>